<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      :title="btn.Add"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
    >
      <div>
        <div class="base-content-operate" style="float: left">
          <el-button type="primary" @click="choiceDevice">{{
            dataList.SelectDevice
          }}</el-button>
        </div>
        <br />
        <div>
          <el-table
            :data="list"
            element-loading-text="Loading"
            height="200"
            fit
            highlight-current-row
          >
            >
            <el-table-column :label="dataList.DeviceNumber">
              <template slot-scope="scope">
                {{ scope.row.num }}
              </template>
            </el-table-column>
            <el-table-column
              :label="
                $i18n.locale === 'en'
                  ? dataList.DeviceEName
                  : dataList.DeviceName
              "
            >
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column :label="dataList.DeviceSpecifications">
              <template slot-scope="scope">
                {{ scope.row.specifications }}
              </template>
            </el-table-column>
            <el-table-column :label="dataList.DeviceStatus">
              <template slot-scope="scope">
                {{ scope.row.statusName }}
              </template>
            </el-table-column>

            <el-table-column :label="dataList.DevicePersonResponsibleId">
              <template slot-scope="scope">
                {{ scope.row.personResponsibleName }}
              </template>
            </el-table-column>
            <el-table-column
              :label="
                $i18n.locale === 'en'
                  ? dataList.eDeviceStorageAddress
                  : dataList.DeviceStorageAddress
              "
            >
              <template slot-scope="scope">
                {{ scope.row.storageAddress }}
              </template>
            </el-table-column>

            <el-table-column :label="dataList.Operation">
              <template slot-scope="scope">
                <div class="base-table-operation">
                  <el-link
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index)"
                    >{{ btn.Delete }}</el-link
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <br />
        <div>
          <div class="base-content-operate" style="float: left">
            <el-button type="primary" @click="choiceMaintenanceDetection">{{
              btn.AddMainTask
            }}</el-button>
          </div>
          <br />
          <div>
            <el-table :data="tableData" height="250" border style="width: 100%">
              <el-table-column prop="project" width="180">
                <template slot="header">
                  <span style="color: red">*</span>
                  <span>{{ dataList.MaintenanceTask }}</span>
                </template>
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.project"
                    :placeholder="dataList.EnterContent"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="planDate"
                :label="dataList.ScheduledMaintenanceTime"
                width="180"
              >
                <template slot="header">
                  <span style="color: red">*</span>
                  <span>{{ dataList.ScheduledMaintenanceTime }}</span>
                </template>
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="scope.row.planDate"
                    type="date"
                    :placeholder="dataList.SelectDate"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column prop="cycle" :label="dataList.Week">
                <template slot="header">
                  <span style="color: red">*</span>
                  <span>{{ dataList.Week }}</span>
                </template>
                <template slot-scope="scope">
                  <el-row>
                    <el-col :span="12">
                      <el-input
                        v-model="scope.row.cycle"
                        oninput="value=value.replace(/[^\d]/g,'')"
                      ></el-input>
                    </el-col>
                    <el-col :span="12">
                      <el-select
                        ref="options"
                        v-model="scope.row.unit"
                        :placeholder="dataList.Placeholder"
                        @change="unitChange(scope.$index)"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option> </el-select
                    ></el-col>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column
                prop="maintenancePersonId"
                :label="dataList.MaintenancePersonnel"
              >
                <template slot="header">
                  <span style="color: red">*</span>
                  <span>{{ dataList.MaintenancePersonnel }}</span>
                </template>
                <template slot-scope="scope">
                  <UserDropDownList
                    :value="scope.row.maintenancePersonId"
                    :return-objct.sync="returnObjct"
                    @input="borrowPersonChange(scope.$index, $event)"
                  />
                </template>
              </el-table-column>
              <el-table-column :label="dataList.Operation">
                <template slot-scope="scope">
                  <div class="base-table-operation">
                    <el-link
                      size="mini"
                      type="danger"
                      @click="deleteMaintenanceDetection(scope.$index)"
                      >{{ btn.Delete }}</el-link
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="onSubmit('formData')">{{
          btn.Confirm
        }}</el-button>
        <el-button @click="cancel">{{ btn.Cancel }}</el-button>
      </div>
      <DeviceDialogList
        v-if="choiceDeviceVisible"
        :dialog-form-visible.sync="choiceDeviceVisible"
        :checked-rows.sync="checkedRows"
        @checkedRowsFun="checkedRowsFun"
      />
    </el-dialog>
  </div>
</template>

<script>
import DeviceDialogList from "../../../components/DeviceDialogList.vue";
import { periodUnit } from "../../../utils/const";
import UserDropDownList from "../../../components/UserDropDownList.vue";
export default {
  name: "DeviceMaintenanceProjectAddDialog",
  components: { DeviceDialogList, UserDropDownList },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      returnObjct: true,
      list: [],
      checkedRows: [],
      deviceNameNum: "",
      loading: false,
      innerDialogFormVisible: false,
      formLabelWidth: "100px",
      choiceDeviceVisible: false,
      tableData: [],
      options: periodUnit,
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {
    dialogFormVisible(val) {
      this.innerDialogFormVisible = val;
    },
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
  },
  methods: {
    borrowPersonChange(index, val) {
      this.tableData[index].maintenancePersonId = val.value;
      this.tableData[index].maintenancePersonName = val.label;
    },
    // 周期单位
    unitChange(index) {
      this.tableData[index].unitName = this.options.find(
        (item) => item.value === this.tableData[index].unit
      ).label;
    },

    deleteMaintenanceDetection(index) {
      this.tableData.splice(index, 1);
    },
    handleDelete(index) {
      this.list.splice(index, 1);
    },
    // 新增选择设备
    choiceDevice() {
      this.checkedRows = this.list;
      this.choiceDeviceVisible = true;
    },
    cancel() {
      this.innerDialogFormVisible = false;
    },
    // 关闭选择设备弹框
    checkedRowsFun(rows) {
      this.list = rows;
    },
    closeDialog() {
      this.$parent.getList();
      this.cancel();
    },
    // 选择维保项目
    choiceMaintenanceDetection() {
      this.tableData.push({
        project: "",
        planDate: null,
        cycle: "",
        unit: 1,
        unitName: this.$i18n.locale === "en" ? "Year" : "年",
        maintenancePersonId: null,
        maintenancePersonName: "",
      });
    },
    onSubmit() {
      if (this.list === null || this.list.length === 0) {
        this.$message.warning(this.$i18n.t("ModuleDevice.Message.SelectEquip"));
        return false;
      }
      if (this.tableData === null || this.tableData.length === 0) {
        this.$message.warning(
          this.$i18n.t("ModuleDevice.Message.AddMaintenanceTasks")
        );
        return false;
      }
      for (let i = 0; i < this.tableData.length; i++) {
        if (!this.tableData[i].project) {
          this.$message.warning(
            this.$i18n.t("ModuleDevice.Message.MaintenanceCantEmpty")
          );
          return false;
        }
        if (!this.tableData[i].planDate) {
          this.$message.warning(
            this.$i18n.t("ModuleDevice.Message.ScheduledMainCantEmpty")
          );
          return false;
        }
        if (!this.tableData[i].cycle || !this.tableData[i].unit) {
          this.$message.warning(
            this.$i18n.t("ModuleDevice.Message.IntervalCannotEmpty")
          );
          return false;
        }
        if (!this.tableData[i].maintenancePersonId) {
          this.$message.warning(
            this.$i18n.t("ModuleDevice.Message.MaintenancePersonnelCantEmpty")
          );
          return false;
        }
      }

      var data = {};
      data.deviceList = this.list;
      data.projectList = this.tableData;

      this.$emit("closeDeviceMaintenanceProject", data);
      this.cancel();
    },
  },
};
</script>
